<template>
    <div class="BusinessAddress">
        <headerTou title="全年口腔保健消费卡" :isfanhui=true url='Details'></headerTou>
        <div class="boxyouhui">
             <caryouhui :data=dataone :shiyong=isshiyong></caryouhui>
        </div>
        <div class="tqm">
            <div class="tqm1"> 
                <span class="span">特权码</span>
                 <span class="span1">13236835815</span>
            </div>
             <div class="tqm2" @click="erwei(1)">
                 <img src="../img/商家二维码@2x.png" alt="">
             </div>
        </div>
        <div class="shuoming">
     
            <div class="shiyong">使用说明</div>
            <div class="shm">Studies show that one-tenth of the American population is hearing-impaired. Over the years, </div>
        </div>
        <div class="fansi">
            <div class="renDetails">
              <img src="../img/Rectangle@2x.png" alt="">
              <div class="DetailsTitle">
                  <div class="DetailsName">天天咖啡</div>
                  <div class="phone"> 观音山运营中心10号楼23楼</div>
              </div>
          </div>
          <div class="Map">
                <baidumap ></baidumap>
          </div>
        </div>
              <div class="footflex">
          <div class="btn" @click="tiaozhuan" v-show="btn==true">转送给亲友</div>
         </div>
         <div  v-show='isflex==true' class="qrc" style=" width: 190px;
    height:200px;">
    <div  style=" width: 120px;
    height:120px;" class="q">
             <div class="qr" id="qrcode" ref="qrcode"></div>
        </div>     
         </div>
         <div v-show='isflex==true' class="backflex" @click="erwei(2)"></div>
         <img class="imgfenxiang" v-show="isimg" src="../img/分享好友.png" alt="" @click='issimg'>
    </div>
</template>
<script>
import headerTou from "./zujian/header.vue";
import caryouhui from "./zujian/caryouhui.vue";
import baidumap from "./zujian/map.vue";
import QRCode from "qrcodejs2";
export default {
  data() {
    return {
      btn:true,
      isshiyong:false,
      isflex:false,
      isimg:false,
      dataone: {
        qianshu: 90,
        neirongone: "全年口腔保健消费卡",
        neirongtwo: "2018.05.13-2018.06.30"
      }
    };
  },
  created() {
    console.log(QRCode);
  },
  mounted() {
    this.qrcode();
  },
  methods: {
    issimg:function(){
      this.isimg=false;
    },
    tiaozhuan: function() {
      // this.$router.push({ name: "GivePrivilege" });
      this.isshiyong=true;
      this.btn=false;
      this.isimg=true
    },
    erwei:function(i){
      if(i==1)
      this.isflex=true
      else
       this.isflex=false
    },
    qrcode() {
      let qrcode = new QRCode("qrcode", {
        width: 120, // 设置宽度
        height: 120, // 设置高度
        text: "https://baidu.com"
      });
    }
    /*
    @  在需要调用的地方  这样必须这样调用  否则会出现  appendChild  null  就是id为qrcode的dom获取不到 返回结果为null
*/
  },
  //   watch: {
  //       data:function(newll){
  //           console.log(newll)
  //            console.log(111)
  //       }
  //   },
  components: {
    headerTou,
    baidumap,
    caryouhui,
    QRCode
  }
};
</script>
<style lang="scss" scoped>
.BusinessAddress {
  padding-bottom: 132px;
  .boxyouhui {
    background: #e5e5e5;
    padding: 18 * 2px 12 * 2px;
  }
  .tqm {
    height: 61 * 2px;
    width: 750px;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    align-items: center;
    border-bottom: 1px solid #e5e5e5;
    .tqm2 {
      width: 29 * 2px;
      height: 29 * 2px;
      img {
        width: 29 * 2px;
        height: 29 * 2px;
      }
    }
    .tqm1 {
      .span {
        font-family: PingFangSC-Regular;
        font-size: 32px;
        color: #333333;
      }
      .span1 {
        font-family: PingFangSC-Regular;
        font-size: 32px;
        color: #333333;
      }
    }
  }
  .shuoming {
    padding: 0 30px;
    width: 750px;
    height: 111 * 2px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding-top: 30px;
    padding-bottom: 10px;
    border-bottom: 18px solid #e5e5e5;
    .shiyong {
      width: 200px;
      height: 44px;
      font-family: PingFangSC-Regular;
      font-size: 32px;
      color: #333333;
    }
    .shm {
      font-family: PingFangSC-Regular;
      font-size: 32px;
      color: #333333;
      overflow-y: auto;
    }
  }
  .fansi {
    .renDetails {
      padding: 0 0px 0 30px;
      width: 720px;
      height: 152px;
      border-bottom: 1px solid #e0e0e0;
      position: relative;
      img {
        height: 96px;
        width: 96px;
        position: absolute;
        left: 30px;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto 0;
        border-radius: 50%;
      }
      .DetailsTitle {
        font-family: PingFangSC-Regular;
        position: absolute;
        left: 150px;
        top: 36px;
        line-height: 50px;
        .DetailsName {
          font-size: 32px;
          color: #333333;
        }
        .phone {
          font-size: 24px;
          color: #999999;
        }
      }
    }
    .Map {
      height: 162 * 2px;
      width: 750px;
    }
  }
  .footflex {
    width: 100%;
    height: 132px;
    background: #ffffff;
    line-height: 132px;
    position: fixed;
    bottom: 0;
    .btn {
      border-radius: 8px;
      background: #e97a36;
      width: 630px;
      height: 72px;
      font-family: PingFangSC-Regular;
      font-size: 36px;
      color: #ffffff;
      letter-spacing: 0;
      text-align: center;
      line-height: 72px;
      margin: 0 auto;
      position: relative;
      top: 30px;
    }
  }
  .qrc {
    background: #ffffff;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 999;
    .q {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }
  }
  .backflex {
    opacity: 0.3;
    background: #000000;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  &>.imgfenxiang{
    width: 750px;
    height: 1206px;
   position: fixed;
  left:0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  }
}
</style>

